<template>
  <div class="person">
    <!-- {{ a }} -->
    <!-- {{ list }} -->
    <!-- <li v-for="item in list">{{ item.name }} -- {{ item.age }} </li> -->
    <li v-for="item in list222">{{ item.name }} -- {{ item.age }} </li>
  </div>
</template>

<script lang="ts" setup name="Person">
import { type Persons } from '@/types'

//第一种写法：仅接收
// defineProps(['a', 'list'])

//第二种写法：接收+限制类型
// defineProps<{ a: string, list: Persons }>()

//第三种写法：接收+限制类型+限制必要性（list属性可能不存在）
// defineProps<{ a: string, list?: Persons }>()

//第三种写法：接收+限制类型+限制必要性（list属性可能不存在）+默认值
withDefaults(defineProps<{ list222?: Persons }>(), {
  list222: () => [
    { id: 5, name: '张三22', age: 18 },
    { id: 5, name: '李四22', age: 38 },
    { id: 5, name: '王五22' }
  ]
})

</script>
<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>